<template>
  <div class="move-shop">
    <!-- 顶部搜索栏 -->
    <header class="header">
      <van-row gutter="10">
        <van-col span="3">
          <van-icon name="bars" class="menu-icon" />
        </van-col>
        <van-col span="21">
          <van-search
            v-model="keyword"
            show-action
            placeholder="请输入搜索关键词"
            background="#face40"
            @search="handleSearch"
          >
            <template #action>
              <div class="search-button" @click="handleSearch">搜索</div>
            </template>
          </van-search>
        </van-col>
      </van-row>
    </header>

    <!-- 轮播图 -->
    <van-swipe class="banner" :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in bannerImages" :key="image">
        <img :src="image.split(',')[0]" class="banner-image" />
      </van-swipe-item>
    </van-swipe>

    <!-- 通知栏 -->
    <van-notice-bar
      left-icon="volume-o"
      text="所有的桥都是温暖的，因为它让河流不再难过。"
    />

    <!-- 图标菜单 -->
    <div class="icon-menu">
      <van-swipe :touchable="true" indicator-color="white">
        <van-swipe-item v-for="(page, index) in [0, 1]" :key="index">
          <van-grid :column-num="5" :border="false">
            <van-grid-item
              v-for="item in hotProduct"
              :key="item.title"
              :icon="item.img"
              :text="item.title"
              :icon-size="index === 0 ? '50px' : '30px'"
            />
          </van-grid>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 秒杀模块 -->
    <div class="seckill">
      <div class="seckill-info">
        <span>20221091</span>
        <span>3230</span>
        <span>李进进</span>
      </div>
      
      <div class="seckill-products">
        <van-grid :column-num="4">
          <van-grid-item
            v-for="item in MSproduct"
            :key="item.id"
            :icon="item.img.split(',')[0]"
            :text="item.title"
            class="seckill-item"
          />
        </van-grid>
      </div>
    </div>

    <!-- 商品展示区 -->
    <div class="product-section">
      <van-grid :border="false" :column-num="2" :gutter="10">
        <!-- 猜你喜欢 -->
        <van-grid-item class="guess-like">
          <div class="section-title">
            <van-icon name="like" color="red" />
            <span>猜你喜欢</span>
            <van-icon name="like" color="red" />
          </div>
          
          <div v-for="item in Guesslike" :key="item.id" class="guess-item">
            <van-image :src="item.img.split(',')[0]" />
            <h4>{{ item.name }}</h4>
            <p>{{ item.subName }}</p>
            <span class="price">￥{{ item.price }}</span>
          </div>
        </van-grid-item>

        <!-- 商品列表 -->
        <van-grid-item 
          v-for="item in productData" 
          :key="item.id"
          class="product-item"
        >
          <van-image :src="item.img.split(',')[0]" />
          <div class="product-info">
            <div class="product-title">
              <van-icon name="vip-card-o" color="#ee0a24" size="30px" />
              <span>{{ item.name }}</span>
            </div>
            <p class="product-subtitle">{{ item.subName }}</p>
            <div class="product-price">
              <span class="currency">￥</span>
              <span class="amount">{{ item.price }}</span>
            </div>
            <div class="product-footer">
              <img 
                src="https://img12.360buyimg.com/img/s48x28_jfs/t1/127567/8/7519/1313/5f165ca9Ea295fca1/b90967cc602f446a.png" 
                class="brand-icon"
              >
              <span class="similar-button">看相似</span>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="activeTab">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="cluster-o" :to="{ name: 'moveCategory' }">分类</van-tabbar-item>
      <van-tabbar-item icon="shop-collect-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ProductApi, CategoryApi } from '@/api'

// 类型定义
interface Product {
  id: number
  name: string
  subName: string
  price: number
  img: string
  title?: string
}

interface Category {
  id: number
  name: string
  parentId: number
  icon: string
}

// 路由实例
const router = useRouter()

// 响应式数据
const activeTab = ref(0)
const keyword = ref('')
const bannerImages = ref<string[]>([])
const hotProduct = ref([
  { img: '//img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', title: '华杉超市' },
  { img: '//img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', title: '华杉超市' },
  { img: '//img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', title: '华杉超市' },
  { img: '//img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', title: '华杉超市' },
  { img: '//img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', title: '华杉超市' },
])
const MSproduct = ref<Product[]>([])
const productData = ref<Product[]>([])
const Guesslike = ref<Product[]>([])

// 生命周期钩子
onMounted(() => {
  loadProductData()
  loadCategoryData()
})

// 处理搜索
const handleSearch = () => {
  if (!keyword.value.trim()) return
  router.push({
    name: 'movelist',
    query: { keyword: keyword.value }
  })
}

// 加载商品数据
const loadProductData = async () => {
  try {
    const res = await ProductApi.select.call()
    
    // 处理轮播图数据
    bannerImages.value = Array.from(res, ({img}) => img).slice(0, 6)
    
    // 处理秒杀商品数据
    res.forEach((item: Product) => {
      item.title = String(item.price)
    })
    MSproduct.value = res.slice(0, 4)
    
    // 处理商品列表数据
    productData.value = res
    
    // 处理猜你喜欢数据
    const randomId = Math.floor(Math.random() * 10) + 1
    const guessRes = await ProductApi.select.call({ id: randomId })
    Guesslike.value = guessRes
  } catch (error) {
    console.error('加载商品数据失败:', error)
  }
}

// 加载分类数据
const loadCategoryData = async () => {
  try {
    const res = await CategoryApi.select.call()
    const categories = res.map((item: Category) => ({
      ...item,
      title: item.name
    }))
    hotProduct.value = categories
      .filter(item => item.parentId === 0)
      .slice(0, 5)
  } catch (error) {
    console.error('加载分类数据失败:', error)
  }
}
</script>

<style scoped>
.move-shop {
  background-color: rgb(18, 173, 65);
}

.header {
  background: linear-gradient(to bottom, #26a872 10%, #046e30 80%);
  padding: 10px;
}

.menu-icon {
  color: #ffefef;
  font-size: 30px;
  margin: 13px 15px;
}

.search-button {
  color: #fff;
  font-weight: 500;
  font-size: 18px;
}

.banner {
  width: 100%;
  height: 200px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon-menu {
  width: 97%;
  margin: 6px;
  padding: 10px;
  background: #fff;
  border-radius: 15px;
}

.seckill {
  width: 97%;
  margin: 6px;
  background: #046e30;
  border-radius: 15px;
  display: flex;
}

.seckill-info {
  width: 20%;
  padding: 20px 10px;
  color: #fff;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.seckill-products {
  width: 76%;
  margin: 5px;
  background: #fff;
  border-radius: 15px;
}

.seckill-item {
  color: red;
  font-size: 15px;
}

.product-section {
  margin: 30px 0;
  padding: 0 10px;
}

.guess-like .section-title {
  color: #c2bfbf;
  font-weight: 700;
  margin-bottom: 10px;
}

.guess-item {
  margin-bottom: 15px;
  text-align: left;
}

.guess-item h4 {
  margin: 5px 0;
  font-weight: 700;
}

.guess-item .price {
  color: red;
  font-weight: 700;
}

.product-item {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
}

.product-info {
  margin-top: 10px;
}

.product-title {
  display: flex;
  align-items: center;
  gap: 5px;
}

.product-subtitle {
  margin: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  color: red;
  font-weight: 700;
  margin: 5px 0;
}

.product-price .currency {
  font-size: 14px;
}

.product-price .amount {
  font-size: 20px;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.brand-icon {
  width: 30px;
  height: 17px;
}

.similar-button {
  padding: 5px 10px;
  background: #f2f2f2;
  border-radius: 10px;
  font-size: 15px;
}

:deep(.van-search__content) {
  border-radius: 15px;
}
</style>

